<template>
  <div class="container">
    <div class="gif" v-if="gif">
      <div>
        <div class="gif-img">
          <!--                    <img src="../assets/img/70px.gif" />-->
          <img src="../assets/img/Flickr-1.4s-200px.svg" />
        </div>
        <p>加载中...</p>
      </div>
    </div>
    <div class="jiazai" v-if="jiazai">
      <div class="jiazai-content">
        <!--                <img src="../assets/img/70px.gif" />-->
        <img src="../assets/img/Flickr-1.4s-200px.svg" />
        <div>加载中...</div>
      </div>
    </div>
    <div class="complain">
      <a @click="set">
        <i class="iconfont icon-jinggao"></i><span>投诉</span>
      </a>
    </div>
    <div class="content">
      <div class="center"  ref="center">
        <!--小说图片，名称，作者-->
        <div class="shutou">
          <img :src="books.ImageUrl ? books.ImageUrl :''" />
          <h3>{{books.Title}}</h3>
          <p>{{books.Author}} 著</p>
        </div>
        <!--小说章节内容-->
        <div class="shu"  v-for="(all_contents,index) in all_content" :key="index">
          <div class="shu_head">{{all_contents.title}}</div>
          <div class="shu_content">
            <p v-for="(contents,index) in all_contents.content" :key="index">{{contents}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="guanzu" v-if="guanzu">
      <div class="guanzu-2">
        <div class="guanzu-tishi">
          <div><span>温馨提示</span></div>
          <div>长按识别作者授权<span>公众号</span>继续阅读</div>
          <div>由于版权问题，<br>请扫下方二维码继续阅读</div>
          <div class="tishi-img">
            <img v-if="qrcode_img" :src="qrcode_img"/>
          </div>
          <div>长按识别上方二维码</div>
          <div @click="guanzhu">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        id: this.$axios.defaults.getQuery("id"),
        cid: this.$axios.defaults.getQuery("cid"),
        books: [], //图书信息
        chapter:[], //章节信息
        content: [], //章节内容
        all_content:[], //所有内容
        guanzu: false,
        gif: true, //加载
        jiazai : false ,
        index: 0,
        tiqian: false, //提前加载内容
        code: true,
        qrcode_img: '', //公众号二维码
      }
    },
    created:function (){
        this.BookInfo();
    },
    methods:{
      scroll(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        let scrollHeight2 = Math.ceil(scrollHeight*0.9+this.index*100);
        //滚动条到底部的条件
        if(scrollTop+windowHeight > scrollHeight2){
          // if(scrollTop+windowHeight == scrollHeight){
          if(this.tiqian){
            this.index = this.index
          }else{
            this.tiqian = true;
            // this.jiazai = true;
            this.index++;
            this.code = false;
            this.chapters(this.index)
            // this.chapters(this.index)
          }
        }
        if(scrollTop+windowHeight == scrollHeight){
          if(this.code){
            this.jiazai = true;
            this.chapters(this.index)
          }
          this.jiazai = true;
        }
      },
      set:function(){
        this.$emit('set','tousu')
      },
      //隐藏关注提示
      guanzhu:function(){
        this.guanzu=false
        window.addEventListener('scroll', this.scroll)
      },
      //获得公众号二维码
      qrcode:function(bookID, chapterIndex){
        let url = "";
        let params = null;
        if(!this.$axios.defaults.promotionID) {
          // 获得当前 APP 二维码
          url = "/app-qrcode"
        } else {
          // 获得推广二维码
          url = this.$axios.defaults.endHost + "/promotion-qrcode";
          params = {
            params:{
              BookID: bookID,
              ChapterIndex: chapterIndex,
              PromotionID: this.$axios.defaults.promotionID
            }
          };
        }
        this.$axios.get(url, params).then(response => {
          if(response.data.url) {
            this.qrcode_img = response.data.url
          }
        })
      },
      //书籍信息，章节标题
      BookInfo:function(){
        this.$axios.defaults.withCredentials = true;
        this.$axios.get( "/book-infos", {params:{BookIDs:[this.id]}}).then(response=>{
          this.$axios.defaults.withCredentials = false;
          this.books=response.data.books[0];
          document.title = response.data.books[0].Title;
          this.qrcode(this.id, response.data.books[0].SubChapterIndex);
          this.chapters();
        })
      },
      chapters:function(){
        let chapter_Index=parseInt(this.cid)+parseInt(this.index);
        this.$axios.get( "/chapter", {params:{BookID:this.id,Index:chapter_Index}}).then(response=>{
          if(response){
            if(response.data.chapter){
              this.chapter=response.data.chapter;
              this.next_chapters(response.data["content-url"])
            }else if(response.data.err_code==3000){
              if(this.code){
                this.guanzu=true;
                this.jiazai = false;
                this.tiqian = false;
                this.code = false;
                window.removeEventListener('scroll', this.scroll)
              }
              this.code = true
            }
          }else{
            this.code = true;
          }
        })
      },
      //章节内容
      next_chapters:function(content_url){
        this.$axios.get(content_url, {params: {unset: true}}).then(response=>{
          let contents = response.data.split("\n");
          this.all_content.push({
            title: this.chapter.Title,
            content: contents
          });
          this.gif = false;
          this.jiazai = false;
          this.tiqian = false;
          //滚动加载下一章
          window.addEventListener('scroll', this.scroll)
        })
      },
    },
    destroyed () {
      window.removeEventListener('scroll', this.scroll)
    }
  }
</script>

<style scoped>
  .container {
    background: #e9dcbf;
    padding: 0px;
    position: relative;
    margin-bottom: 0px;
  }
  .bag {
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 999;
    display: none;
    top: 0px;
  }
  .jiazai{
    position: fixed;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: rgba(255,255,255,0.5);*/
    width: 100%;
    height: 100%;
    z-index: 500;
  }
  .jiazai-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*背景透明*/
    background: rgba(255, 255, 255, 0);
    /*隐藏文字*/
    color: rgba(0, 0, 0, 0);
    width: 100px;
    height: 100px;
    font-size: 14px;
    border-radius: 5px;
  }
  .jiazai img{
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
  .bag-2 {
    height: 100vh;
    display: flex;
    align-items: center;
  }

  .qian {
    text-align: center;
    width: 25rem;
    margin: auto;
    background: black;
    border-radius: 10px;
    padding-top: 10px;
    color: white;
    letter-spacing: 2px;
  }

  .zhen {
    width: 20rem;
    margin: 15px auto;
    background: #FF4772;
    border-radius: 5px;
    padding: 5px 0px;
  }

  .qian>div:nth-child(1) {
    width: 20rem;
    margin: 10px auto;
    border-bottom: 1px dashed white;
    padding-bottom: 10px;
  }

  .get {
    color: #FF4772;
  }

  .qian>div:nth-child(2) {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.7rem;
  }

  .qian>div:nth-child(3) {
    margin-top: 20px;
  }

  .qian>div:nth-child(5) {
    margin-top: 20px;
  }

  .qian>div:nth-child(6) {
    margin: 20px 10px 5px;
  }
  .guanzu2 {
    background: rgba(0, 0, 0, 0.2);
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0px;
    display: none;
  }
  .guanzu2-2 {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .guanzu2-2 img{
    width: 100%;
  }
  .guanzu-tishi2 {
    position: relative;
    text-align: center;
    width: 22rem;
    height: 30rem;
  }
  .guanzu-tishi2>img{
    border-radius:10px ;
    height: 100%;
  }
  .tishi-img2{
    width: 10rem;
    height: 10rem;
    margin-bottom: 10px;
  }
  .tishi-img2 img{
    width: 100%;
    height: 100%;
  }
  .charu{
    text-align: left;
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: red;
    bottom: 10px;
    left: 30px;
    z-index: 999;
  }
  .zi{
    color: white;
    -webkit-text-stroke: 0.8px red;
    letter-spacing: 0.02em;
  }
  .erwei{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 777;
  }
  .x{
    position: absolute;
    right: -5px;
    top: -5px;
    width: 22px;
    height: 22px;
    background: gray;
    border: 2px solid white;
    color: white;
    border-radius:50% ;
  }
  .guanzu {
    background: rgba(0, 0, 0, 0.2);
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0px;
  }
  .guanzu-2 {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
  }
  .guanzu-tishi {
    text-align: center;
    width: 21rem;
    margin: 100px auto;
    background: white;
    border-radius: 10px;
    padding-top: 10px;
  }

  .guanzu-tishi img {
    width: 100%;
  }

  .tishi-img {
    width: 16rem;
    margin: 10px auto 0px;
  }

  .guanzu-tishi span {
    color: #d0021b;
  }

  .guanzu-tishi div:nth-child(1) {
    font-size: 1.5rem;
  }

  .guanzu-tishi div:nth-child(2) {
    margin-top: 10px;
  }

  .guanzu-tishi div:nth-child(3) {
    margin-top: 10px;
    color: #d0021b;
  }

  .guanzu-tishi div:nth-child(4) {
    margin-top: 5px;
  }

  .guanzu-tishi div:nth-child(5) {
    margin-top: -5px;
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 1.5rem;
  }

  .guanzu-tishi div:nth-child(6) {
    margin-top: 10px;
    border-top: 1px solid #DDDDDD;
    color: #3688ff;
    padding: 10px;
    font-size: 1.3rem;
  }

  .guanzu-tishi div:nth-child(6):hover {
    background: gainsboro;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .top {
    position: fixed;
    width: 100%;
    padding: 10px 0px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.7);
  }

  .left a {
    margin-left: 8px;
  }

  .right a {
    margin-right: 8px;
  }

  .left a,
  .right a {
    color: white;
    text-decoration: none;
  }

  .top img {
    width: 2.4rem;
  }

  .top span {
    font-size: 1.3rem;
  }

  .center {
    background: #efdbbc;
  }

  .shutou {
    text-align: center;
    padding-top: 70px;
  }

  .shutou img {
    width: 10rem;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
  }

  .shutou h3 {
    font-weight: bold;
    width: 13rem;
    margin: 15px auto 10px;
    font-size: 0.9rem;
  }

  .shutou p {
    font-size: 0.8rem;
    opacity: 0.5;
    margin: 5px;
  }

  .shu {
    padding: 10px 15px;
    font-size: 1.1rem;
  }

  .shu_head {
    font-weight: bold;
    margin-bottom: 20px;
  }
  /*.shu_content{*/
  /*height: 1000px;*/
  /*}*/
  .shu_content p {
    text-indent: 2em;
    margin-bottom: 15px;
    line-height: 200%;
  }

  .jia,
  .jian {
    width: 6rem;
    border: 1px solid white;
    text-align: center;
    padding: 2px 5px;
  }

  .vip_top {
    position: relative;
    text-align: center;
    font-size: 1rem;
  }

  .vip_top:before {
    content: '';
    position: absolute;
    top: 50%;
    background: #ff4772;
    width: 26%;
    height: 1px;
    left: 0;
  }

  .vip_top:after {
    content: '';
    position: absolute;
    top: 50%;
    background: #ff4772;
    width: 26%;
    height: 1px;
    right: 0;
  }

  .price {
    margin-top: 15px;
    padding-left: 40px;
  }

  .balance {
    margin-top: 10px;
    padding-left: 40px;
    color: #ff4772;
  }

  .chongzhi {
    margin-top: 20px;
    text-align: center;
    color: #fff;
    background-color: #ff4772;
    font-size: 1.2rem;
    width: 100%;
    padding: 0.6rem;
    border-radius: 5px;
  }

  .nianhui {
    text-align: center;
    color: #ff4772;
    margin: .57rem 0 0 0;
    padding-bottom: 8rem;
    font-size: 1.2rem;
  }

  .tuijian {
    margin: 20px 0px;
  }

  .tuijian h4 {
    margin: 20px 0px;
    text-align: center;
    font-size: 1.2rem;
  }

  .tuijian p {
    text-align: center;
    width: 6.5rem;
  }

  .tui {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    font-size: 1rem;
  }

  .tui img {
    width: 5.5rem;
    height: 7.5rem;
    border-radius: 5px;
  }

  .tui p {
    width: 5rem;
    margin-top: 10px;
    font-size: 1rem;
  }

  .bottom {
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding-top: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .bottom img {
    width: 2rem;
  }

  .bottom p {
    text-align: center;
    margin-top: 0px;
  }

  .bottom a {
    text-decoration: none;
    color: white;
  }

  .gaibeijing {
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding-top: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: space-around;
  }

  .gaibeijing div {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin: 10px 0px 20px;
  }

  .bai {
    background: white;
  }

  .fen {
    background: #f695ab;
  }

  .zong {
    background: #efdbbc;
  }

  .lv {
    background: #4fb884;
  }

  .hei {
    background: black;
  }

  .gaizihao {
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding-top: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.9rem;
  }
  .gaizihao div {
    margin: 10px 0px 20px;
  }
  .gif{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: white;
    z-index: 400;
  }
  .gif>div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }
  .gif p{
    width: 90px;
    padding-bottom: 5px;
    font-weight: 500;
    text-align: center;
    background: rgba(255,255,255,0.7);
    margin: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .gif img{
    width: 80px;
    height: 80px;
  }
  .gif-img{
    width: 90px;
    height: 70px;
    line-height: 70px;
    background: rgba(255,255,255,0.7);
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .complain{
    position: fixed;
    right: 10px;
    top: 0px;
  }
  .complain a{
    text-decoration: none;
    display: flex;
  }
  .complain a span{
    padding-left: 5px;
    font-size: 1rem;
    color: #3688FF;
    display: block;
    margin-top: 3px;
  }
  .iconfont{
    color: gray;
    opacity: 0.6;
    margin-top: 4px;
  }
  .sung11{
    position: fixed;
    z-index: 9990;
    width: 100%;
    bottom: 0px;
    text-align: center;
    background: #d96b54;
    padding: 10px 0px;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    opacity: 0.6;
  }
  .sung11 a{
    text-decoration: none;
    font-size: 15px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 5px;
  }
  .lingqu{
    font-weight: bold;
    font-size: 1.2rem;
    background: #dbbb86;
    border-radius: 2px;
    color: black;
    padding: 5px;
    margin: 0px 5px;
  }
  .sung11 b{
    font-size: 14px;
  }
</style>
